<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示多页</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.0.2/css/bootstrap.css" rel="stylesheet">
    <script type="application/javascript"
            src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.0.2/js/bootstrap.js"></script>
    <script type="application/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
</head>
<body>
<ul class="list-group" style="text-align: center">
    {% for user in user_list %}
        <li class="list-group-item">{{ user.user_name }}</li>
    {% endfor %}
</ul>

<nav aria-label="Page navigation" style="text-align: center">
    <ul class="pagination">
        {#判断是否存在上一页#}
        {% if user_list.has_previous %}
            <li>
                <a href="{% url 'myapp:show' %}?pageNum={{ user_list.previous_page_number }}" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
        {% else %}
            {#不存在上一页，显示第一页#}
            <li>
                <a href="{% url 'myapp:show' %}?pageNum=1" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
        {% endif %}
        {#循环所有的页码#}
        {% for num in page.page_range %}
            <li><a href="{% url 'myapp:show' %}?pageNum={{ num }}">{{ num }}</a></li>
        {% endfor %}
        {#判断是否存在，下一页#}
        {% if user_list.has_next %}
            <li>
                <a href="{% url 'myapp:show' %}?pageNum={{ user_list.next_page_number }}" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        {% else %}
            {#不存在，显示最后一页#}
            <li>
                <a href="{% url 'myapp:show' %}?pageNum={{ page.num_pages }}" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        {% endif %}

    </ul>
</nav>


</body>
</html>